Laravel and Vue.js

和訳しながらメモしていく

本のリポジトリ

1.Introduction

公式ドキュメント

多少PHPとJSの基礎知識は必要だよということが書かれている

2. Vue.js Basics

code:vue.js

<div id="app">

{{ message }}

</div>

...

<script src="vue.js/..."> // パッケージ

<script>

const app = new Vue({

el:'#app',

data: {

message: 'hello'

}

});

el

本文中のdivタグと一致させ、vueが動作する場所を決定する

data

コンポーネント中で使用するオブジェクトの定義をする。

3. Conditionals and Loops

条件分岐とループの概念。

code:vue.js

<div id="app">

<p v-if="visible">see this </p>

</div>

display:noneではなく、DOMから完全に消える。displayを操作するものは別にある。

code:vue.js

<li v-for="animal in animals">

{{ animal }}

</li>

data: { animals: ['Dog', 'Cat', 'Bird']}

4.Vue.js Forms

v-model

ボタンに付与して、動作に応じてメソッドを呼び出せる

code:vue.js

<button v-on:click="sayHi">sayHiメソッドを呼ぶ</button>

...

<script>

const app = new Vue({

data: {

name: ''

},

methods: {

sayHi() { alert('Hi there, ' + this.name)}

}

enterキーなどを使いたいなら、テキストボックス側に指定の記述をすることでメソッドを呼べる

code:html

<p>

名前入力:

<input type="text" v-model="name" @keyup.enter="sayHi">

</p>

<button @click="sayHi">メソッド</button>

5.components

デフォルトの記述方式

code:js

<div id="app>

<hello-world></hello-world>

</div>

<script>

Vue.component('hello-world', {

template: '<div>Hello!</div>'

});

const app = new Vue({

el: '#app"

});

</script>

この辺がlaravelはうまいこと自動化されているが、vueだけで実装するなら上記の感じになる

この章のjsを追いかけてみる

code:LoopTest.vue

<template>

<div>

<ul>

<li v-for="task in tasks">{{ task }}</li>

</ul>

<input type="text" v-model="newTask" @keyup.enter="addTask">

<button @click="addTask">Add Task</button>

</div>

</template>

<script>

export default {

methods: {

addTask() {

this.tasks.push(this.newTask);

this.newTask = '';

}

}

};

</script>

code:html

<div id="loop_test">

<h4>Team Tasks</h4>

<h5>A task</h5>

<loop-test></loop-test>

<h5>B task</h5>

<loop-test></loop-test>

</div>

6.HomeStead

7. Laravel Setup

HomeStead

Laravelで作成できる仮想サーバーのこと

valet

同じくlaravelを開発する際に立ち上げることができる仮想サーバー

mac向らしい。

環境構築用のチャプターである

8.Purchases Component

9.Purchases Table

Laravelプロジェクトでvueを使う時の基礎

code:app.js

Vue.component('purchases-component', require('./components/PurchasesComponent.vue').default);

これだけで良いかも。

第一引数はhtml要素の名前

requireで定義するのは呼ぶコンポーネントのファイル。

? 既存の学習ページの警告を消してみる

mounted()

ページが読み込まれた時点で実行する処理のこと

この中にメソッドを書いていた場合は、DOMが成立した時点でそのメソッドを呼ぶという挙動になる

axios.get()

ajaxを使うためのライブラリ

ルート指定

→現時点でのURLに+して、上のURLが参照される

/study/techbook/vue/chapter8_purchases

ドメイン + 指定のパスとして参照される(基本こっち)

読み込み中の画面を出す処理の理屈がわかったかも

準備できた(axios.getなどで読み込めた = 変数に値が入ったら）、v-ifで切り替わるみたいなイメージ

10. Databse Setup

まあpurchasesテーブルを実際に作ってみようか

後で削除すれば良い。

$ php artisan make:model Purchase -m

外部キー制約など

code:php

$table->integer('user_id')->unsigned(); // unsigned: 符号無し

// purchasesテーブルのuser_idを、usersテーブルのidに紐付けることになる

// ("user_id" references "id" on "users" table.)

$table->foreign('user_id')->references('id')->on('users');

マイグレーションエラーになった

code:sh

$table->bigInteger('user_id')->unsigned();

これで通った

ordeyByの呼び出しについて

code:php

// エラーになる

//BadMethodCallException Method Illuminate\Database\Eloquent\Collection::orderBy does not exist.

$purchases = Auth::user()->purchases->orderBy('date', 'desc')->get();

// ()を付属するとデータベースクエリビルだのメソッドが使える。

$purchases_t = Auth::user()->purchases()->orderBy('date', 'desc')->get();

11. Create Form

モーダルでDB登録フォームを作る

結構がっつり実装したので、書籍に書いてあるものを流れ通りに追っていく

モーダルを作成

templateで実装した要素について

modal fade

背景が暗くなってフェードインさせるエフェクトにする

tabindex="-1"

従来tabキーを押すと画面内の別の要素に移動するが、指定することで（ざっくりだが）別枠として扱われる

モーダルに付与させると、モーダルの背後にあるコンテンツを操作不能にすることができる

UXが上がる

role="dialog"

tabindexと組み合わせて使用する。tabキーで別の要素にフォーカスされないようにする

bootstrap側で操作するために必要な設定。上のdocsを見ると良い（基本モーダルを閉じるためのもの）

v-if="createForm.errors.length > 0"

form-horizontal

フォームの要素を1列ずつ並べて出す。レイアウト用。

モーダルを開いた時に、Dateに入力フォーカスが設定されるようにするため。

code:js

$('#modal-create-purchase').on('shown.bs.modal', () => {

$('#create-purchase-date').focus();

});

v-model="createForm.date"

jsで実装した要素について

showCreatePurchaseForm()

指定のモーダルを開く。

store()

この中では特に何かしているわけではない

persistPurchase(method, uri, form, modal)

form.errors = [];

このメソッドが実行されるたび、過去のエラーメッセージをリセットする役割

axios[method](uri, form)

Axioosライブラリを使用してHTTPリクエストを送信している

.then(response => {

正常に成功した時の挙動を記載するパーツ。

this.getPurchases();

データを保存した後にもう一度APIからデータを呼び出している。

これで表示されるデータが保存後の最新状態になる

フォームフィールドをクリアし、再度入力しやすくする

$(modal).modal('hide');

モーダルを閉じる

.catch(error => {

リクエストが失敗した時の挙動。

エラーレスポンスデータがオブジェクトである場合

form.errors = _.flatten(_.toArray(error.response.data));

配列にうまいこと分けている処理。

それ以外の場合は汎用メッセージを出す。

12. Edit Form

編集画面を作成する

code:html

<td style="vertical-align: middle;">

<a class="action-link" @click="edit(purchase)">Edit</a>

</td>

モーダルについて

code:html

<input id="edit-purchase-date" type="text" class="form-control" @keyup.enter="update" v-model="editForm.date">

編集ボタンをクリックする前の値が格納されるが、これは

code:js

update() {

this.persistPurchase(

'put', '/study/techbook/vue/chapter8_purchases/' + this.editForm.id,

this.editForm, '#modal-edit-purchase'

)

},

persistPurchase(method, uri, form, modal) { ... }

put

リソースの更新を明示するHTTPメソッド。

uri

新しくリソースを更新するためのパスをlaravel側のコントローラで定義してそちらに飛ばした。

form

どのフォームから来たのかの指定。

modal

13.Deleting Purchases

削除機能を作る

エラーに遭遇

code:txt

Error in v-on handler: "ReferenceError: log is not defined

エラーその２

code:txt

code:js

destroy() {

axios.delete('/study/techbook/vue/chapter8_purchases/' + purchase.id)

.then(response => {

this.getPurchases();

});

},

サーバーエラー

code:console.log

app.js?id=34d62ba663f0054a6f00:297

laravel側

code:txt

Call to undefined method App\User::purchase()

/var/www/laravel_kirthread/vendor/laravel/framework/src/Illuminate/Support/Traits/ForwardsCalls.php#50

BadMethodCallException

機能作成までのフロー

動作を実装させるためのボタンをviewに用意する

メソッドの調整をする

確認画面に出したいのであれば、ここに情報を記入する

メソッドの引数で渡した情報などを画面に仕込む。

code:html

<!-- こんな感じで。 -->

<div class="modal-body">

<p>purchase id: '{{ this.deleteId }}' will be deleted.</p>

</div>

code:js

export default {

data() {

deleteId: ''

},

methods: {

function confirm(purchaseId) {

this.deleteId = purchaseId;

}

}

モーダル内のボタンで本命の処理を実行させる

code:js

destroy() {

axios.delete('/study/techbook/vue/chapter8_purchases/' + this.deleteId)

.then(response => {

this.getPurchases();

});

// 終わった後、元の画面に戻す処理

$('#modal-confirm-delete').modal('hide');

},

なるほど

14 Paging

外部モジュールを使う

バージョンが古いからきついかもな〜

code:sh

npm install laravel-vue-pagination

added 16 packages, removed 2 packages, changed 4 packages, and audited 1170 packages in 8s

22 packages are looking for funding

81 vulnerabilities (2 low, 47 moderate, 32 high)

To address issues that do not require attention, run:

npm audit fix

To address all issues (including breaking changes), run:

npm audit fix --force

npm audit fixで依存関係を軽く治す

バージョンが古いから今回はこのまま行く

? vueを使うならlaravelのバージョンと一緒にverも併せてあげるべきかも.

まあこれはいいか（モジュール特有の操作っぽいし）